<template>
  <div class='container'>
    <el-row :gutter="20">
            <el-col :span="6">【题型】: {{questionDetails.questionType|questionType}}</el-col>
            <el-col :span="6"><span>【编号】: {{questionDetails.id}}</span></el-col>
            <el-col :span="6"><span>【难度】: {{questionDetails.difficulty|difficulty}}</span></el-col>
            <el-col :span="6"><span>【标签】: {{questionDetails.tags}}</span></el-col>
            <el-col :span="6"><span>【学科】: {{questionDetails.subjectName}}</span></el-col>
            <el-col :span="6"><span>【目录】: {{questionDetails.directoryName}}</span></el-col>
            <el-col :span="6"><span>【方向】: {{questionDetails.direction}}</span></el-col>
        </el-row>
        <el-divider></el-divider>
        <p>【题干】：</p>
        <span class="question-Types" v-html="questionDetails.question"></span>
          <!-- 题型 -->
           <div v-if="questionDetails.questionType!=3">
            <p>{{questionDetails.questionType|questionType}} 选项：（以下选中的选项为正确答案）</p>
              <el-radio-group :value="radio" v-if="questionDetails.questionType==1" >
                <el-radio  :label="item.isRight" v-for="item in questionDetails.options" :key="item.id" >{{item.title}}</el-radio>
              </el-radio-group>
            <el-checkbox-group :value="checkList" v-if="questionDetails.questionType==2">
              <el-checkbox  :label="item.isRight" v-for="item in questionDetails.options" :key="item.id">{{item.title}}</el-checkbox>
            </el-checkbox-group>
         </div>
        <el-divider></el-divider>
        <!-- 参考答案 -->
        <span >【参考答案】： <el-button type="danger" @click="videoBtn">视频答案预览</el-button></span>
        <div class="reference" v-if="videoShow===true">
        <video  class="video" controls :src="questionDetails.videoURL"></video>
        </div>
        <el-divider></el-divider>
          <!-- 答案解析 -->
          <span >【答案解析】：<span style="display: inline-block;" v-html="questionDetails.answer"></span> </span>
        <el-divider></el-divider>
        <!-- 题目备注 -->
        <span>【题目备注】：{{questionDetails.remarks}}</span>
  </div>
</template>

<script>
export default {
  name: 'preview',
  props: {
    questionDetails: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      radio: 1, // 单选框
      checkList: [1], // 多选框
      videoShow: false
    }
  },
  methods: {
    videoBtn () {
      this.videoShow = true
    }
  }
}
</script>

<style scoped lang='scss'>
.el-col{
  margin-bottom: 20px;

}
.question-Types{
  color: blue;
}
.el-radio{
  display: block;
  margin-bottom: 15px;
}
.el-checkbox{
  display: block;
  margin-bottom: 15px;
}
.reference{
  width: 400px;
  height: 300px;
  margin-top: 20px;
  .video{
    width: 100%;
    height: 100%;
  }
}
</style>
